<script setup>
import { onMounted, ref } from 'vue'
import { getNewsServe } from '@/api/news.js'
import homeCarousel from '@/components/homeCarousel.vue'
import homeCards from '@/components/home-cards.vue'
import fiveGold from '@/components/five-gold.vue'
import newsMessage from '@/components/newsMessage.vue'

defineOptions({
  name: 'AppHome'
})
const list = ref([])
onMounted(async () => {
  const res = await getNewsServe({ page: 1, size: 8 })
  list.value = res.data.list
})
</script>

<template>
  <div>
    <homeCarousel></homeCarousel>
    <div class="my-5 container">
      <div class="row">
        <div>
          <h1 align="center" class="col-12">
            <b>科技<span style="color: #104094">产品中心</span></b>
          </h1>
          <el-divider
            ><span class="text-secondary"
              >十二年专业卫浴五金规模化生产</span
            ></el-divider
          >
          <home-cards></home-cards>
        </div>
        <div class="my-5">
          <h1 align="center" class="col-12">
            <b>五金制造成为<span style="color: #104094">四大难题</span></b>
          </h1>
          <el-divider
            ><span class="text-secondary"
              >别让配套的卫浴五金成为您销售的障碍</span
            ></el-divider
          >
          <fiveGold></fiveGold>
        </div>
        <div class="my-5">
          <h1 align="center" class="col-12">
            <b>新闻<span style="color: #104094">动态</span></b>
          </h1>
          <el-divider
            ><span class="text-secondary"
              >行业领先的除湿加湿解决方案供应商</span
            ></el-divider
          >
          <div class="row" v-if="list.length">
            <newsMessage
              v-for="value in list"
              :key="value.id"
              :item="value"
            ></newsMessage>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
